<template>
  <div class="wrap">
    <p>当前计数器值：<span class="count-number">{{ count }}</span></p>
    <div>
      <button @click="plusOne">计数器加1</button>
      <button @click="resetCount">重置</button>
    </div>
  </div>  
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({initCount: Number});
const emit = defineEmits(['count-changed'])
const count = ref(props.initCount);

function plusOne() {
  count.value = count.value + 1;
}

function resetCount() {
  count.value = props.initCount;
}

watch(count, (newValue) => {
  emit('count-changed', newValue);
})
</script>

<style lang="scss" scoped>
$main-color: #113d9c;
$main-text-color: #333;
.wrap {
  display: flex;
  .count-number {
    font: bold 16px Arial;
    color: $main-color;
  }
  button {
    border: 1px solid lighten($main-color, 20%);
    border-radius: 5px;
    background-color: lighten($main-color, 60%);
    color: $main-text-color;
    padding: 3px 5px;
    font-size: 12px;
    margin: 0;
  }
}
</style>